<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<style type="text/css">
			[v-cloak]{
			    display: none;
			}
			ul li:hover, ul li:active{
				background: #ccc;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<input type="text" v-model="query" @keyup="getData" />
			<button @click="getData()">搜索</button>
			<ul>
				<li v-for="(item, index) in list" :key="index" @click="choose(item)">{{ item.q }}</li>
			</ul>
		</div>
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
	let _this;
	var app = new Vue({
		el: '#app',
		data: {
			query: '',
			list: [],
			myAjax: '',
			myTimer: ''
		},
		created() {
			_this = this
		},
		methods: {
			getData() {
				console.log( this.query )
				clearTimeout(this.myTimer)
				if( this.myAjax ){
					// this.myAjax.abort()
				} 
				
				this.myTimer = setTimeout(function() {
					_this.myAjax = $.ajax({
						async : true,
						url : "http://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&wd=" + encodeURIComponent(_this.query),
						type : "GET",
						dataType : "jsonp",
						jsonp : 'callback',
						jsonpCallback: 'handleResponse',
						success: function(response, status, xhr){
							console.log(_this.query, response.g);
							_this.list = response.g
						},
					});
				}, 200);
			},
			choose(item){
				this.query = item.q
				this.list = []
			}
		}
	})
</script>
